<template>
     <!--底部音乐栏-->
        <footer>
      <div class="footer">
        <div class="footer-list">
          <div class="footer-btn">
              <a href="#" class="prev iconfont icon-yidaozuiqian-copy "></a>
              <a href="#" class="play iconfont icon-pcduanbizhixiazaicishutubiao "></a>
              <a href="#" class="pause iconfont  icon-hupanzanting-copy "></a>
              <a href="#" class="next  iconfont icon-yidaozuiqian-copy-copy"></a>
              <!-- <input class="volume" type="range" max="1" min="0" step="0.1"> -->
          </div>
          <!-- <div class="footer-music">
            <audio controls class="audio"> </audio>
          </div> -->
          <!-- <div class="musicname"> 33333 </div> -->

         </div>
      </div>
        </footer>
   
</template>

<style >

/* 底部 */
footer{
    min-width: 992px;
    height: 90px;
  }
  .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 90px;
  }
  .footer-list{
    display: flex;
    min-width: 992px;
    background-color: #f0f0f0;
    height: 90px;
    justify-content:center;
    align-items : center;
  }
  .footer-btn {  
  display: flex;
   justify-content: center; /* 使其中的子元素在水平和垂直方向上都居中对齐。 */
    align-items: center;
 
}
  .footer-btn a{
    margin: 0 10px;
  }

  .prev,.next {
    font-size: 18px;
      color: #444444;  
  } 
  .play, .pause{
   
    font-size: 36px;
      color: #444444;    
  }

 </style>

